<template>
  <div class="catemanager">
    <hmheader title="频道管理">
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
    </hmheader>
    <div class="mychannel">
      <h3>点击删除频道</h3>
      <div class="list">
        <span
          v-for="(value, index) in column"
          :key="value.id"
          @click="add(index, value)"
          >{{ value.name }}</span
        >
      </div>
    </div>
    <div class="youchannel">
      <h3>点击添加频道</h3>
      <div class="list">
        <span
          v-for="(value, index) in deletes"
          :key="index"
          @click="remove(index, value)"
          >{{ value.name }}</span
        >
      </div>
    </div>
  </div>
</template>


<script>
import hmheader from "@/components/header.vue";
import { mycategory } from "@/apis/category.js";
export default {
  components: {
    hmheader,
  },
  data() {
    return {
      column: [],
      deletes: [],
    };
  },
  methods: {
    add(index, value) {
      this.deletes.push(value);
      localStorage.setItem("column_add", JSON.stringify(this.deletes));
      this.column.splice(index, 1);
      localStorage.setItem("column_remove", JSON.stringify(this.column));
    },
    remove(index, value) {
      this.column.unshift(value);
      localStorage.setItem("column_remove", JSON.stringify(this.column));
      this.deletes.splice(index, 1);
      localStorage.setItem("column_add", JSON.stringify(this.deletes));
    },
  },
  async activated() {
    this.column = JSON.parse(localStorage.getItem("column_remove"));
    if (!this.column) {
      let res = await mycategory();
      this.column = res.data.data;
      console.log(this.column);
      if (localStorage.getItem("mytoken")) {
        this.column.splice(0, 2);
      } else {
        this.column.splice(0, 1);
      }
    } else {
      this.deletes = JSON.parse(localStorage.getItem("column_add")) || [];
    }
  },
};
</script>


<style lang="less" scoped>
.mychannel,
.youchannel {
  padding: 10px;
  h3 {
    line-height: 30px;
    font-weight: bold;
  }
  .list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    > span {
      width: 20%;
      margin-left: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>